
import { mapState } from 'vuex'
import { setItem, getItem } from '@/utils/storage'
import bus from '@/utils/bus'
export default {
  data () {
    return {
      keyObj: {
        Control: -1,
        d: -1
      }
    }
  },
  computed: {
    ...mapState(['collectObj'])
  },
  mounted () {
    // console.log('collectObj ==>', this.collectObj)
    document.onkeydown = (e) => {
      // ctrl keyCode ==> 17 | dkeyCode ==> 68
      const { keyCode } = e
      if (keyCode === 17) {
        this.keyObj.Control = 17
      } else if (this.keyObj.Control === 17 && keyCode === 68) {
        this.keyObj.d = 68
      }
    }
    document.onkeyup = (e) => {
      const { keyCode } = e
      if (keyCode === 17) {
        this.keyObj = {
          Control: -1,
          d: -1
        }
      }
    }
  },
  watch: {
    collectObj: {
      handler: function (obj) {
        console.log('01点34分', obj)
        this.judgeHandler(obj)
      },
      immediate: true
    },
    keyObj: {
      handler: function (obj) {
        this.ctrl$dHandler(obj)
      },
      deep: true
    }
  },
  methods: {
    ctrl$dHandler (obj) {
      const { Control, d } = obj
      if (Control === 17 && d === 68) {
        alert('用户按下了 ctrl + d, 设置 canPop 为 false 表示不可以再弹出')
        const collectObj = getItem('COLLECT_OBJ')
        collectObj.canShow = false
        this.$store.commit('CHANGE_STATE', { key: 'collectObj', value: collectObj })
        setItem('COLLECT_OBJ', collectObj)
        bus.$emit('open-collection', false)
      }
    },
    judgeHandler (obj) {
      const { swiper, less, router, canShow } = obj
      if (!canShow) return
      if (swiper > 3 || less > 2 || router > 1) {
        bus.$emit('open-collection', true)
      }
    }
  }
}
